<!-- 设置面板 -->
<template>
  <div class="container" ref="container" v-if="showSetting">
    <div class="head">
      <img src="../assets/path.png" class="back"  @click="popOutSetting()">
      <p>设置</p> 
      <hr />
    </div>
    <div class="body">
      <div class="left">
        <ul>
          <li @click="changeContent(0)"><img src="../assets/常规.png"><div class="word">常规设置</div></li>
          <li @click="changeContent(1)"><img src="../assets/视频.png" alt=""><div class="word">视频</div></li>
          <li @click="changeContent(2)"><img src="../assets/音频.png" alt=""><div class="word">音频</div></li>
          <li @click="changeContent(3)"><img src="../assets/path (4).png" alt=""><div class="word">录制</div></li>
          <li @click="changeContent(4)"><img src="../assets/安全.png" alt=""><div class="word">账号与安全</div></li>
          <li @click="changeContent(5)"><img src="../assets/我们.png" alt=""><div class="word">关于我们</div></li>
        </ul>
      </div>
      <el-divider direction="vertical" />
      <div class="right">
        <!-- 常规设置 -->
        <div class="general" v-if="splitElement.general">
          <div class="choice">
            <el-checkbox v-model="checked1" label="入会开启摄像头" size="large" />
            <el-checkbox v-model="checked2" label="入会开启麦克风" size="large" />
            <el-checkbox v-model="checked3" label="开麦时播放提示音" size="large" />
            <el-checkbox v-model="checked4" label="入会时使用电脑音频" size="large" />
            <el-checkbox v-model="checked5" label="关闭主页面时，退出程序" size="large"/>
            <el-checkbox v-model="checked6" label="显示当前说话者" size="large" />
            <el-checkbox v-model="checked7" label="显示参会时长" size="large" />
            <el-checkbox v-model="checked8" label="语音激励" size="large" />
            <el-checkbox v-model="checked9" label="锁屏时不退出会议" size="large" />
            <el-checkbox v-model="checked10" label="始终显示工具栏" size="large" />
            <el-checkbox v-model="checked11" label="接收桌面右下角通知" size="large" />
          </div>
        </div>
        <!-- 视频设置 -->
        <div class="video" v-if="splitElement.video">
          <img src="../assets/摄像头展示.png" alt="">
          <div class="box1">
              摄像头
            <el-checkbox v-model="checked1" label="入会开启摄像头" size="large" />
            <el-checkbox v-model="checked12" label="视频镜像" size="large" />
            <el-checkbox v-model="checked13" label="视频减噪" size="large" />
          </div>
          <div class="box2">
            布局设置
            <el-switch
    v-model="value"
    size="large"
    active-text="25名参会者"
    inactive-text="9名参会者"
    style="--el-switch-on-color: #9cdcfe; --el-switch-off-color: #026bff"
  />
            <el-checkbox v-model="checked14" label="入会隐藏非视频参会者" size="large" />
            <el-checkbox v-model="checked15" label="入会隐藏自己的视图" size="large" />
          </div>
          <div class="box3">
           <p>虚拟背景</p> 
            <div class="list"> 
               <ul> 
            <li><img src="../assets/画板 118.png" alt=""></li>
            <li><img src="../assets/画板 118 (3).png" alt=""></li>
            <li><img src="../assets/画板 118 (6).png" alt=""></li>
          </ul></div>
          
          <div class="list">    
            <ul> 
            <li><img src="../assets/画板 118 (1).png" alt=""></li>
            <li><img src="../assets/画板 118 (4).png" alt=""></li>
            <li><img src="../assets/画板 118 (7).png" alt=""></li>
          </ul></div>
          <div class="list">    
            <ul> 
            <li><img src="../assets/画板 118 (2).png" alt=""></li>
            <li><img src="../assets/画板 118 (5).png" alt=""></li>
            <li><img src="../assets/画板 118 (8).png" alt=""></li>
          </ul></div>
        
          
          </div>
        </div>
        <!-- 音频设置 -->
        <div class="audio" v-if="splitElement.audio">
          扬声器
          <div class="box">耳机（xxxxxx）</div>
          <div class="switch">
          <span class="demonstration">输出音量</span>
          <img src="../assets/声音.png" alt="">
          <el-slider v-model="value1" />
          </div>
          麦克风
          <div class="box">麦克风矩阵（Realtek(R) Audio）</div>
          <div class="switch">
          <span class="demonstration">输出音量</span>
          <img src="../assets/声音.png" alt="">
          <el-slider v-model="value2" />
          </div>
          <div class="chioce2"> 
            <el-checkbox v-model="checked18" label="入会开启麦克风" size="large" />
            <el-checkbox v-model="checked19" label="入会时使用电脑音频" size="large" />
            <el-checkbox v-model="checked20" label="自动调整麦克风音量" size="large" />
            <el-checkbox v-model="checked21" label="开麦时播放提示音" size="large" />
          </div>
            高级音频设置
        <el-checkbox v-model="checked22" label="语言模式" size="large" />
        <div>
          <span class="demonstration">背景音减噪</span>
        <div class="box">高（环境较嘈杂时使用）</div>
      </div>
        </div>
        <!-- 录制设置 -->
        <div class="record" v-if="splitElement.record">
          本地录制
          <div> 
             <p>录制文件保存至</p>
          <div class="box">录制文件保存路径（xxxxxx）</div>
          <button>更改</button>
          <button>打开</button>
          <span class="tip">您也可以在<a href="历史会议"></a>中，找到相应的会议录制记录。</span>
        </div>
        <div class="chioce3">
          <el-checkbox v-model="checked23" label="屏幕共享期间同时录制视频窗口" size="large" />
            <el-checkbox v-model="checked24" label="同时录制音频文件" size="large" />
            <el-checkbox v-model="checked25" label="保留临时录制文件" size="large" />
            <el-checkbox v-model="checked26" label="开启智能录制" size="large" />
            <span class="tip">即智能总结会议，帮助回忆会议内容</span>
        </div>
      
        </div>
        <!-- 账号与安全设置 -->
        <div class="safety" v-if="splitElement.safety">
          账号信息
          <div class="class">
            <ul>
              <li>手机号</li>
              <li>邮箱</li>
              <li>QQ号</li>
              <li>微信</li>
            </ul>
          </div>
          <div class="message">
            <ul>
              <li>+86 12345678910</li>
              <li>333222111@163.com</li>
              <li>123456789</li>
              <li>智慧黑板网页</li>
            </ul>
          </div>
          <div class="button">
            <ul>
              <li><button>更改</button></li>
              <li><button>更改</button></li>
              <li><button>更改</button></li>
              <li><button>更改</button></li>
            </ul>
          </div>
          <div class="tip1">
            <el-checkbox v-model="checked27" label="陌生登录提醒" size="large" />
          </div>
          账号安全
          <div class="class">
            <ul>
              <li>密码修改</li>
              <li>登录设备管理</li>
              <li>注销账号</li>
            </ul>
          </div>
          <div class="button">
            <ul>
              <li><button>修改密码</button></li>
              <li><button>设备管理</button></li>
              <li><button>注销账号</button></li>
            </ul>
          </div>
        </div>
        <!-- 关于我们设置 -->
        <div class="about" v-if="splitElement.about">
          <img src="../assets/logo.png" alt="">
          <p>智绘黑板</p>
          <button>检查更新</button>
          <div class="button2"><button>系统介绍</button></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted, reactive, onMounted } from "vue";

const showSetting = ref(false);
const splitElement = reactive({
  general:false,
  video:false,
  audio:false,
  record:false,
  safety:false,
  about:false
}) // 设置内容是否显示

onMounted(()=>{
  //设置默认显示状态
  Object.entries(splitElement).forEach(([key, value]) => {    
    value = false
  });
  splitElement.general = true
})

//控制显示设置内容
function changeContent(content){
  //清空显示状态
  splitElement.general = false
  splitElement.video = false
  splitElement.audio = false
  splitElement.record = false
  splitElement.safety = false
  splitElement.about = false
  switch(content){
    case 0:
      splitElement.general = true
      break;
    case 1:
      splitElement.video = true
      break;
    case 2:
      splitElement.audio = true
      break;
    case 3:
      splitElement.record = true
      break;
    case 4:
      splitElement.safety = true
      break;
    case 5:
      splitElement.about = true;
      break;
  }
}

function popOutSetting(){
  showSetting.value = showSetting.value ? false : true
}

//常规设置部分
const checked1 = ref(false);
const checked2 = ref(false);
const checked3 = ref(false);
const checked4 = ref(false);
const checked5 = ref(false);
const checked6 = ref(false);
const checked7 = ref(false);
const checked8 = ref(false);
const checked9 = ref(false);
const checked10 = ref(false);
const checked11 = ref(false);
//视频设置部分
const value = ref(true)
const checked12 = ref(false);
const checked13 = ref(false);
const checked14 = ref(false);
const checked15 = ref(false);
const checked16 = ref(false);
const checked17 = ref(false);
//音频设置部分
const value1 = ref(0)
const value2 = ref(0)
// const formatTooltip = (val: number) => {
//   return val / 100
// }
const checked18 = ref(false);
const checked19 = ref(false);
const checked20 = ref(false);
const checked21 = ref(false);
const checked22 = ref(false);
//录制设置部分
const checked23 = ref(false);
const checked24 = ref(false);
const checked25 = ref(false);
const checked26 = ref(false);
//安全设置部分
const checked27 = ref(true);

defineExpose({
  popOutSetting,
})
</script>

<style scoped>
.container {
  height: 700px;
  width: 80rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 4px 20px gray;
  z-index: 100000;
}

.back{
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  z-index: 1000000;
}

span {
  font-size: 2rem;
  margin: 10px;
}
.head {
  width: 95%;
  margin: 0 auto;
  position: relative;
}
.head p {
  font-family: 微软雅黑;
  font-size: 20px;
  text-align: center;
}

.body {
  top: 50px;
  padding: 30px;
  position: absolute;
  display: flex;
  width: 100%;
  height: 600px;
}
.left{
  flex: 1;
}
.right{
  flex: 5;
  position: relative;
}
.el-divider--vertical {
    border-left: 2px var(--el-border-color) var(--el-border-style);
    display: inline-block;
    height: 100%;
}
li{
  cursor: pointer;
  padding: 10px;
  position: relative;
}
img{
  padding: 2px;
  position: absolute;
}
.word{
  position: absolute;
  left: 50px;
  font-size: 1rem;
}

.choice {
  padding: 35px;
  font-size: 1rem;
  width: 10%;
}
.el-checkbox.el-checkbox--large .el-checkbox__label {
  font-size: 16px;
}
.el-checkbox.el-checkbox--large .el-checkbox__inner {
  height: 16px;
  width: 18px;
}
/* 视频部分 */
.box1{
  padding: 15px;
    width: 10%;
    position: relative;
    top: 42%;
    left: 20px;
  
}
.box2{
  padding: 15px;
    width: 20%;
    position: relative;
    top: 42%;
    left: 20px;
}
.box3{
  height: 100%;
  width: 50%;
  top: 0;
  left: 40%;
  position: absolute;
  padding: 10px;
  display: flex;
}
.video{
  height: 100%;
  font-size: large;
}
.video img{
  padding: 10px;
}

.box3 li{
  padding-bottom: 120px;
  list-style: none;
}
.box3 p{
  position: absolute;
  left: 13%;
}
.list{
  flex: 1;
}
.box3 ul{
  padding-top:30px ;
}
/* 音频部分 */
.audio{
  height: 100%;
  font-size: larger;
  font-weight: 600;
  padding: 15px;
}
.box{
  font-size: medium;
  font-weight:300 ;
 margin: 15px;
  background-color: rgb(224, 224, 224);
  width:40%;
  border-radius: 10px;
  padding: 12px;
}
.switch{
  width: 50%;
  position: relative;

}
 .el-slider {
  margin-top: 0;
  margin-left: 12px;
  position: relative;
  --el-slider-height: 4px;
    --el-slider-button-size: 10px;
    --el-slider-button-wrapper-size: 37px;
    --el-slider-button-wrapper-offset: -15px;
    align-items: center;
    display: flex;
    height: 32px;
    width: 60%;
    position: absolute;
    top: 5px;
    left: 100px;
}

 span {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 44px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.chioce2{
  width: 20%;
}
/* 录制部分 */
.record{
  height: 100%;
  font-size: larger;
  font-weight: 600;
  padding: 15px;
}
.record p{
  position: absolute;
  font-size: 15px;
  font-weight: 500;
  padding: 10px;
}
.record .box{
  font-size: medium;
  font-weight:300 ;
 margin: 15px;
  background-color: rgb(224, 224, 224);
  width:30%;
  border-radius: 10px;
  padding: 12px;
  left: 13%;
  position: absolute;
  border: 1px solid rgb(0, 0, 0);
}
button{
position: absolute;
  left: 50%;
  background-color: rgb(224, 224, 224);
  border: 1px solid rgb(0, 0, 0);
  width:10%;
  border-radius: 10px;
  padding: 12px;
  font-size: medium;
  font-weight:300 ;
  margin: 15px;
}
.tip{
  top: 15%;
    position: absolute;
    font-size: 12px;
    font-weight: 300;
}
.chioce3{
  width: 20%;
  top: 25%;
  position: absolute;
}
.chioce3 span{
  top: 68%;
  position: absolute;
}
/* 账号部分 */
.safety{
  height: 100%;
  font-size: larger;
  font-weight: 600;
  padding: 20px;
}
.class{
  position: absolute;
}
.class li{
  list-style: none;
  font-size: medium;
  font-weight: 600;
}
.message{
  position: absolute;
  left: 10%;
}
.message li{
  list-style: none;
  font-size: medium;
  font-weight: 300;
}
.button li{
  list-style: none;
  font-size: medium;
  font-weight: 300;
  margin: 15px;
}
.button button{
  position: absolute;
  left: 50%;
  background-color: rgb(232, 232, 232);
  border: 1px solid rgb(0, 0, 0);
  width:10%;
  border-radius: 10px;
  padding: 5px;
}
.tip1{
  padding: 30px
}
/* 关于我们 */
.about{
  height: 100%;
  padding: 100px;
}
.about img{
  position: absolute;
  left: 30%;
  top: 10%;
}
.about p{
  font-size: 30px;
  font-weight: 600;
 margin-top: 50px;
    text-align: center;
}
.about button{
  left: 33%;
  background-color: rgb(38, 128, 240);
  border: 1px solid rgb(0, 0, 0);
  width:30%;
  border-radius: 10px;
  margin-top: 50px;
  padding: 5px;
}
.button2{
  margin-top: 90px;
}
</style>